<template>
    <div>
        <h2>成绩管理</h2>
        <div class="score-manger">
            <div class="score-top">
                <div class="search">
                    <span>姓名：</span>
                    <el-input v-model="searchName" placeholder="请输入姓名"></el-input>
                    <el-button  type="primary" @click="search">搜索</el-button>
                </div>
                <div>
                    <el-button @click="add">添加</el-button>
                </div>
            </div>
            <div class="score-con">
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="username"
                        label="姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="theory"
                        label="理论"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="skill"
                        label="技能">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-popconfirm
                                title="确定要删除吗？"
                                @confirm="handleDelete(scope.$index, scope.row)"
                                >
                                <el-button slot="reference"
                                    size="mini"
                                    type="danger"
                                >删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <el-form :model="scoreForm" :rules="rules" ref="scoreForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="username">
                    <el-select v-model="scoreForm.username" placeholder="请选择学生姓名"  v-if="editId == -1">
                        <el-option :label="item.username" :value="item.username" :key="item.username" v-for="item in notScore"></el-option>
                    </el-select>
                    <span v-else>{{scoreForm.username}}</span>
                </el-form-item>

                <el-form-item label="理论" prop="theory">
                    <el-input v-model="scoreForm.theory"></el-input>
                </el-form-item>
                <el-form-item label="技能" prop="skill">
                    <el-input v-model="scoreForm.skill"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="curScore">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {notScore,addScore,getScoreList,delScore,search,edit} from '@/api/score';
var checkScore = (rule, value, callback) => {
    if (value > 100 || value < 0) {
        callback(new Error('请输入正确成绩'));
    } else {
        callback();
    }    
};
export default {
    data(){
        return {
            tableData: [],          //表格的数据
            dialogVisible:false,    //弹窗显示与否
            searchName:'',          //搜索的关键词
            scoreForm:{             //添加的表单
                username:'',
                theory:0,
                skill:0
            },
            rules:{                 //添加表单校验规则
                username: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                theory:[
                     {validator:checkScore, trigger: 'blur' },
                    
                ],
                skill:[
                    {validator:checkScore, trigger: 'blur' },
                ]
            },
            notScore:[], //当天未录入成绩的名单 
            editId:-1    //编辑的id
        }
    },
    methods:{
        //获取当天录入成绩的列表
        getScoreList(){
            getScoreList().then(res => {
                if(res.data.code === 1){
                    this.tableData = res.data.data;
                }
            })
        },
        add(){
            notScore().then(result => {
                if(result.data.code === 1){
                    this.notScore = result.data.data;
                    this.dialogVisible = true;
                }
            })
        },
        //清空表单
        resetForm(){
            this.scoreForm = {
                username:'',
                theory:0,
                skill:0
            }
            this.editId = -1;
        },
        //确认添加
        curScore(){
            // let url = this.editId != -1 ? `/api/score/${this.editId}` : '/api/score';

            // let type = this.editId != -1 ? 'put' : 'post';
             //通过当前表单的校验
            this.$refs.scoreForm.validate((valid) => {
                if (valid) {

                    if(this.editId != -1){
                        //编辑
                        edit(this.editId,this.scoreForm).then(res => {
                            if(res.data.code === 1){
                                //编辑成功
                                //1.关闭弹窗
                                this.dialogVisible = false;
                                //2.清空表单
                                this.resetForm();
                                //3.获取数据
                                this.getScoreList();
                            }
                        })
                    }else{
                        //添加
                         //添加
                        addScore(this.scoreForm).then(res => {
                            if(res.data.code === 1){
                                //添加成功
                                //1.关闭弹窗
                                this.dialogVisible = false;
                                //2.清空表单
                                this.resetForm();
                                //3.获取数据
                                this.getScoreList();
                            }
                        })
                    }
                   
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删除
        handleDelete(index,row){
            console.log(index,row);
            delScore(row.id).then(res => {
                if(res.data.code === 1){
                    this.$message({
                        message: '恭喜你，删除成功',
                        type: 'success'
                    })
                    //重新获取列表
                    this.getScoreList();
                }
            })
            
        },
        //搜索
        search(){
            search(this.searchName).then(res => {
                if(res.data.code === 1){
                    this.tableData = res.data.data;
                    this.searchName = '';
                }
            })
        },
        //编辑
        handleEdit(index,row){
            //1.打开弹窗  2.数据回显 

            //编辑  添加 的区别：1.编辑有id  2.编辑和添加的请求不一样  3.请求地址不一样
            this.editId = row.id;

            this.scoreForm = {
                username:row.username,
                theory:row.theory,
                skill:row.skill
            }

            this.dialogVisible = true;

        },
        //取消
        cancel(){
            this.resetForm();
            this.dialogVisible = false;
        }
    },
    created(){
        //获取当天录入成绩的列表
        this.getScoreList();
    }
}
</script>

<style lang="scss">
    .score-top{
        display: flex;
        justify-content: space-between;
    }

    .search{
        display: flex;
        align-items: center;
        span{
            display:block;
            width:100px;
        }
    }
</style>